<template>
  <div class="mapPage">
    <!--创建地图容器-->
    <div id="zkxMap" class="map"></div>
  </div>
</template>


<script>
import { BMPGL } from '@/bmpgl.js'
import { getHomePage } from '@/api/dataCenterHome'

export default {
  data() {
    return {
      ak: 'pL9ZGnL5eQpIRX2bMwWvRvVyMnXpSDer', // 百度的地图密钥
      myMap: null,
      map: null,
      list: this.$store.state.pointData,
      flagCenter: true,
      flag: false,
      mapTimer: null,
      oldIndex: 0,
      active: false,
      mapFlag: true,
      markerArr: [],
      infoWindowArr: [],
      pointArr: [],
      mapObj: {},
      //信息窗口轮播的下标和定时器
      ind: 0,
      timer: null
    }
  },
  mounted() {
    // this.$store.commit('setLoading', true)
    this.initMap()
  },
  beforeDestroy() {
    clearTimeout(this.mapTimer)
  },
  methods: {
    //渲染地图
    initMap() {
      // 传入密钥获取地图回调。
      let _this = this

      BMPGL(this.ak)
        .then((BMapGL) => {
          // 创建地图实例

          let map = new window.BMapGL.Map('zkxMap')
          // map.enableScrollWheelZoom(true)
          map.setMapType(BMAP_EARTH_MAP)
          map.enableScrollWheelZoom()
          map.centerAndZoom(new window.BMapGL.Point(110.1, 19.32), 5)

          this.map = map
          this.mapTimer = setTimeout(() => {
            if (_this.list[0]) {
              let lng = parseFloat(_this.list[0].lng).toFixed(6)
              let lat = Number(_this.list[0].lat).toFixed(6)
              // console.log(lng);
              // console.log(lat);
              this.map.centerAndZoom(new window.BMapGL.Point(lng, lat), 13)
            } else {
              this.map.centerAndZoom(new window.BMapGL.Point(118.787429, 31.985971), 13)
            }

            //向地图中添加标记点
            var points = []
            var markers = []

            for (var i = 0; i < _this.list.length; i++) {
              if (_this.list[i].pointFlag == true) {
                var point = new window.BMapGL.Point(
                  parseFloat(_this.list[i].lng).toFixed(6),
                  parseFloat(_this.list[i].lat).toFixed(6)
                )
                points.push(point)
                // console.log(_this.list[i].lng);

                // console.log(point);

                var marker = new window.BMapGL.Marker(point)
                markers.push(marker)
                map.addOverlay(marker)
                var opts = {
                  // width: 304, // 信息窗口宽度
                  // height: 102, // 信息窗口高度
                  title: _this.list[i].tenderCode, // 信息窗口标题
                  message: ''
                }
                var infoWindow = new window.BMapGL.InfoWindow(
                  `
            <div style="font-size:1.4rem;padding:0 1.5rem;margin-bottom:1.5rem">
              <div>分包单位数量：${_this.list[i].labourOrgTotal}</div>
              <div>实名制覆盖率：${_this.list[i].realNamePercentage}</div>
            </div>
            <div
              style="padding:1.1rem;color:#1890ff;margin:0 auto;width:16.2rem;font-size:1.4rem;text-align:center;cursor:pointer" class='tendDetail' key="${_this.list[i].orgId}" name="${_this.list[i].tenderCode}"
            >查看标段信息 ></div>`,
                  opts
                ) // 创建信息窗口对象
                infoWindow.addEventListener('clickclose', function() {
                  //点击信息窗口的关闭按钮时触发此事件
                  // _this.show()
                  _this.$store.commit('setPointPosition', {})
                })
                this.infoWindowArr.push(infoWindow)
                // console.log(_this.infoWindowArr);

                marker.addEventListener('click', function() {
                  // if (_this.timer) {
                  //   clearInterval(_this.timer)
                  // }

                  //给标注添加点击事件+
                  this.openInfoWindow(infoWindow)
                  // console.log(document.querySelector('.tendDetail'));

                  document.querySelector('.tendDetail').onclick = function(e) {
                    // debugger
                    let orgId = e.target.getAttribute('key')
                    let tenderCode = e.target.getAttribute('name')
                    let t = true
                    sessionStorage.setItem('projectFlag', t)
                    sessionStorage.setItem('homeFlag', t)
                    sessionStorage.setItem('gatewayId', orgId)

                    sessionStorage.setItem('tenderName', tenderCode)
                    const { href } = _this.$router.resolve({
                      path: `/fu/construction`
                    })
                    window.open(href, '_blank')

                    // console.log(e.target.getAttribute('key'));
                  }
                })
              }
            }
            this.markerArr = markers
            this.pointArr = points

            // console.log(_this.list[0].lng, _this.list[0].lat);

            map.enableScrollWheelZoom()

            // this.show()
            // console.log(111);
          }, 3000)
        })
        .catch((err) => {
          console.log(err)
        })
    },

    //打开信息窗口
    openWindow(pointPosition) {
      this.pointArr.forEach((item, index) => {
        if (pointPosition.lat == item.lat && pointPosition.lng == item.lng) {
          this.map.openInfoWindow(this.infoWindowArr[index], this.pointArr[index])
          let _this=this
          document.querySelector('.tendDetail').onclick = function(e) {
            // debugger
            let orgId = e.target.getAttribute('key')
            let tenderCode = e.target.getAttribute('name')
            let t = true
            sessionStorage.setItem('projectFlag', t)
            sessionStorage.setItem('homeFlag', t)
            sessionStorage.setItem('gatewayId', orgId)

            sessionStorage.setItem('tenderName', tenderCode)
            const { href } = _this.$router.resolve({
              path: `/fu/construction`
            })
            window.open(href, '_blank')

            // console.log(e.target.getAttribute('key'));
          }
        }
      })
    }
  },
  computed: {
    pointZuobiao() {
      return this.$store.state.pointPosition
    }
  },
  watch: {
    pointZuobiao: {
      handler(val) {
        this.openWindow(val)
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
<style lang='less' scoped>
.mapPage {
  width: 100%;
  height: 100%;
  padding: 0;
  // padding: 1rem;
  // background: rgba(0, 0, 0, 0.5);
}
.map {
  // width: 100%;
  // height: calc(100vh - 12rem);
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  /* height: 100vh; */
}
::v-deep #zkxMap canvas {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}
::v-deep .anchorBL {
  display: none;
}

::v-deep .BMap_bubble_title {
  // color: #fff !important;
}
::v-deep .BMap_bubble_content {
  // color: #fff !important;
  // width: 32.5rem !important;
}
// ::v-deep .BMap_bubble_center {
//   height: 101px !important;
// }
::v-deep .BMap_bubble_title {
  // font-size: 2rem;
  color: #1890ff !important;
  // height: 5rem !important;
  // line-height: 5rem !important;
  // margin-bottom: 1.8rem;
  // padding: 1.2rem 1.8rem;
}
::v-deep .BMap_bubble_pop {
  // overflow: unset !important;
  // left: 42rem !important;
  // top: 56rem !important;
  // width: 35.5rem !important;
  // height: 19.5rem !important;
  // color: #fff !important;
  border: 1px solid #fff !important;
  // border-radius: 0 !important;
  // background-color: transparent !important;
  // background: url('../../../../../assets/img/tanchuKuang.png') no-repeat;
  // background-size: 100%;
}
::v-deep .BMap_bubble_pop img {
  // display: none;
}
</style>